<template>
  <div class="team-config">
    <el-container>
      <el-header class="graybackground">
        <el-row>
          <el-col :span="8"><el-page-header @back="goBack" content="团队设置">  </el-page-header></el-col>
          <el-col :span="8">
            <div class="pt20" v-if="visiable">
              <el-input placeholder="设置团队名称" class="font24 input_line width80" v-model="input" maxlength="64"></el-input>
              <el-button  type="text" @click="saveTeamName">保存</el-button>
            </div>

            <div class="pt20" v-if="!visiable">
              <span class="font24">{{input}}</span>
              <i class="el-icon-edit inlineBlock cp active" @click="editTeamName"></i>
            </div>
        </el-col>
        </el-row>
      </el-header>
      <el-container class="pt20">
        <el-aside width="30%" class="left-layout">
          <div class="wd280 fr team-menu">
            <el-menu
              default-active="2"
              text-color="#333"
              @select="selectMenu"
              class="text-left"
              active-text-color="#409eff">
              <el-menu-item index="create" class="ellipsis280">
                <i class="el-icon-folder-add"></i>
                <span slot="title">创建分组</span>
              </el-menu-item>
              <el-menu-item index="ungrounp" class="team-menu ellipsis280" >
                <i class="el-icon-folder-opened"></i>
                <span slot="title">未分组</span>
              </el-menu-item>
            </el-menu>
            <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
            <el-menu
              default-active="2"
              text-color="#333"
              class="text-left"
              @select="selectMenu"
              active-text-color="#409eff">
              <el-menu-item  v-for="(item,index) in menus"  :key="item.id" class="ellipsis280">
                <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-s-tools"></i>
                </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native.prevent="rename(index)">重命名</el-dropdown-item>
                    <el-dropdown-item @click.native.prevent="del(index)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <span slot="title" class="wd280">{{item.name}}</span>
              </el-menu-item>
            </el-menu>
          </div>
        </el-aside>
        <el-main>
          <el-table
            :data="tableData"
            :size="'medium'"
            class="width80">
            <el-table-column
              prop="date"
              label="名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="邮箱(手机号码)"
              width="330">
            </el-table-column>
            <el-table-column
              prop="address"
              label="备注">
            </el-table-column>
            <el-table-column
              align="right">
              <template slot="header" slot-scope="scope">
                <el-input
                  v-model="search"
                  maxlength="32"
                  clearable
                  class="input_line width80"
                  size="mini"
                  placeholder="输入关键字搜索"/>
                <i class="el-icon-search inlineBlock cp" @click="showSearch"></i>
              </template>
              <template slot-scope="scope">
               <i class="el-icon-setting cp" @click="useRoleSet(scope.row.name)"></i>
              </template>
            </el-table-column>
          </el-table>

        </el-main>
      </el-container>
    </el-container>
<!--    新建分组窗口-->
    <group-dialog v-model="groupVisiable" :group="group" @editGroup="editGroup"></group-dialog>
    <role-set-dialog v-model="roleSetVisiable"></role-set-dialog>
  </div>
</template>

<script>
import GroupDialog from '../../../components/team/GroupDialog'
import RoleSetDialog from '../../../components/team/RoleSetDialog'
export default {
  name: 'TeamConfig',
  components: {RoleSetDialog, GroupDialog},
  data () {
    return {
      visiable: false,
      groupVisiable: false,
      roleSetVisiable: false,
      search: '',
      input: '团结设置名称',
      groupIndex: 0,
      group: {id: 0, name: ''},
      menus: [{id: 1, name: '设计部'}, {id: 2, name: '研发部'}, {id: 3, name: '测试部'}],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    // 编辑团队名称
    editTeamName () {
      this.visiable = true
    },
    // 保存团队名称
    saveTeamName () {
      this.visiable = false
    },
    selectMenu (index) {
      switch (index) {
        case 'create':
          this.groupVisiable = true
          this.group = {id: 0, name: ''}
          break
        case 'ungroup': this.$router.push({name: 'TeamConfig'}); break
      }
    },
    // 编辑分组
    editGroup (group, id) {
      if (id) {
        this.menus[this.groupIndex] = group
      } else {
        this.menus.push(group)
      }
    },
    // 分组重命名
    rename (index) {
      this.groupIndex = index
      this.groupVisiable = true
      let _group = {}
      // 复制
      Object.assign(_group, this.menus[index])
      this.group = _group
    },
    del (index) {
      alert(index)
    },
    showSearch () {
    },
    // 设置
    useRoleSet (id) {
      this.roleSetVisiable = true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.team-config {
  height: 100%;
  width: 100%;
}
.team-config .el-container{
  height: 100%;
}
  .team-config .left-layout{
    border-right: 1px solid #cccccc;
  }
.team-config .graybackground{
    background-color: rgba(0,0,0,0.02);
}
</style>
